@mixin account {
  .radioWrapper {
    display: flex;
    flex-direction: column;
    gap: 22px;

    margin-top: 8px;
    padding: 12px 24px;

    background-color: var(--color-dark-500);
    border: 1px solid var(--color-dark-300);
    border-radius: 2px;

    input[type='radio'] {
      display: none;
    }

    input[type='radio'] + label {
      cursor: pointer;

      position: relative;

      display: inline-block;

      padding-left: 36px;

      line-height: 20px;
    }

    input[type='radio'] + label::before {
      content: '';

      position: absolute;
      top: 0;
      left: 0;

      width: 20px;
      height: 20px;

      border: 2px solid var(--color-light-100);
      border-radius: 100%;
    }

    input[type='radio']:disabled + label {
      cursor: default;
      color: var(--color-dark-100);
    }

    input[type='radio']:disabled + label::before {
      cursor: default;
      border: 2px solid var(--color-dark-100);
    }

    input[type='radio'] + label::after {
      content: '';
      position: absolute;
      transition: all 0.3s ease;
    }

    input[type='radio']:checked + label::after {
      top: 5.5px;
      left: 5.5px;

      width: 9px;
      height: 9px;

      background-color: var(--color-light-100);
      border-radius: 100%;
    }
  }
}

.container {
  display: flex;
  flex-direction: column;
  width: 100%;

  .accountTypes {
    @include account;

    margin-top: 30px;
  }

  .subscriptionCosts {
    @include account;

    margin-top: 42px;
  }

  .payment {
    display: flex;
    gap: 54px;
    align-items: center;
    justify-content: flex-end;

    margin-top: 24px;
    margin-bottom: 24px;

    .paymentBtn {
      cursor: pointer;

      display: grid;
      place-items: center;

      width: 96px;
      height: 64px;

      background-color: var(--color-dark-500);
      border: 1px solid var(--color-dark-300);
      border-radius: 8px;

      &:hover {
        background-color: #1f1f1f;
      }

      &:disabled {
        cursor: default;
        background-color: var(--color-dark-500);
      }
    }
  }
}

.currentSubscription {
  margin-top: 30px;

  .subscriptionWrapper {
    display: flex;
    flex-direction: column;

    margin-top: 8px;
    padding: 12px 24px;

    background-color: var(--color-dark-500);
    border: 1px solid var(--color-dark-300);
    border-radius: 2px;

    .subscriptionHeader {
      display: flex;

      & > *:first-child {
        width: 105px;
        margin-right: 20px;
      }

      & > *:last-child {
        width: 175px;
      }
    }

    .subscriptionRow {
      display: flex;

      & > *:first-child {
        width: 105px;
        margin-right: 20px;
      }

      & > *:last-child {
        width: 175px;
      }
    }
  }

  .checkboxWrapper {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: flex-end;

    margin: 19px 0 0 -7px;
  }
}

.spinner {
  position: fixed;
  z-index: 200;
  top: 50%;
  left: calc(50% + 130px);
  transform: translate(-50%, -50%);
}

.opacity {
  opacity: 0.75;
}

.modalContainer {
  gap: 60px;
}
